<template>
  <div class="wik-dialog">
    <div class="wik-dialog-header">
      <div class="wik-dialog-header__default" v-if="!slots.header">
        <span>{{ title }}</span>
        <span class="close" @click="emits('close')"><Close /></span>
      </div>
      <slot name="header" v-else></slot>
    </div>
    <div class="wik-dialog-body">
      <slot
        v-bind="{
          onClose: () => {
            emits('close');
          }
        }"
      ></slot>
    </div>
    <div class="wik-dialog-footer" v-if="isShowFooter">
      <slot name="footer" v-if="slots.footer"></slot>
      <div class="wik-dialog-footer__default">
        <el-button type="default" @click="emits('close')">取消</el-button>
        <el-button type="primary">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Close } from "@element-plus/icons-vue";
import { useSlots, useAttrs } from "vue";
const emits = defineEmits(["close"]);
const slots = useSlots();
const attrs = useAttrs();
console.log(attrs);
defineProps({
  title: {
    type: String,
    default: "标题"
  },
  width: {
    type: String,
    default: "400px"
  },
  height: {
    type: String,
    default: "auto"
  },
  isShowFooter: {
    type: Boolean,
    default: true
  }
});
</script>
<style lang="scss" scoped>
.wik-dialog {
  --wik-dialog-width: v-bind(width);
  --wik-dialog-height: v-bind(height);
  width: var(--wik-dialog-width);
  height: var(--wik-dialog-height);
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-flow: column nowrap;
  &-header {
    width: 100%;
    border-bottom: 1px solid rgb(221 223 230 / 100%);
    &__default {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 22px 20px 30px;
      font-size: 16px;
      color: #333333;
      .close {
        width: 12px;
        height: 12px;
        padding: 8px;
        font-size: 12px;
        color: #666666;
        cursor: pointer;
      }
    }
  }
  &-body {
    min-height: 10px;
    overflow: auto;
    flex: 1;
    margin-bottom: 10px;
  }
  &-footer {
    &__default {
      display: flex;
      justify-content: flex-end;
      padding: 20px 30px;
    }
  }
}
</style>
